<template>
  <div>
    <div>
      <!-- 顶部 -->
      <div class="Dhead1">
        <img src="../assets/img/箭头.png" alt="" width="30px" height="30px" />
        <span>理财产品</span>
        <img src="../assets/img/搜索.png" alt="" width="40px" height="40px" />
        <img
          src="../assets/img/省略号.png"
          alt=""
          width="30px"
          height="30px"
          style="margin-left: 2px"
        />
      </div>
      <!-- 持仓金额 -->
      <div class="DholdPosition" id="">
        <p class="DholdPosition1">
          <span>持仓金额</span>
          <span @click="eyes"><img :src="eyeimg" alt="" id="save-img" /></span> 
        </p>
        <div class="DholdPosition2">
          <p id="Dsave-money">{{ mone }}</p>
          <p id="Dlook">
            查看详情<img
              src="../assets/img/右箭头.png"
              alt=""
              width="30px"
              height="30px"
            />
          </p>
        </div>
      </div>
      <!-- 理财分类 -->
      <div class="Dclassify">
        <ul>
          <li>
            <img src="../assets/img/钱.png" alt="" width="30px" height="30px" />
            <p>农银理财</p>
          </li>
          <li>
            <img
              src="../assets/img/闹铃.png"
              alt=""
              width="30px"
              height="30px"
            />
            <p>活期理财</p>
          </li>
          <li>
            <img
              src="../assets/img/股票.png"
              alt=""
              width="30px"
              height="30px"
            />
            <p>定期理财</p>
          </li>
          <li>
            <img
              src="../assets/img/全部.png"
              alt=""
              width="30px"
              height="30px"
            />
            <p>全部</p>
          </li>
        </ul>
      </div>
      <!-- 额度充足 -->
      <div class="Dlimit">
        <div class="Dlimit1">额度充足</div>
        <p class="Dlimit2">农银安心灵珑ESG第二期低波悦享</p>
        <div class="Dlimit3">
          <div class="Dlimit3top">
            <p style="font-size: 22px; color: black">3.50-4.00%</p>
            <p>中低风险 | 期限493天</p>
          </div>
          <div class="Dlimit3bottom">
            <p>
              业绩比较基准
              <img
                src="../assets/img/注意.png"
                alt=""
                width="25px"
                height="25px"
              />
            </p>
            <button>立即购买</button>
          </div>
        </div>
        <div class="Dlimit4">
          <p>业绩基准不代表未来表现和实际收益，测算详见说明</p>
        </div>
      </div>
      <!-- 热销产品 -->
      <div class="DhotShop">
        <div class="DhotShoptop">
          <h3>热销产品</h3>
          <img
            src="../assets/img/右箭头(1).png"
            alt=""
            width="20px"
            height="20px"
          />
        </div>
        <div id="DhotShop1" v-for="(item, index) in hot_sale" :key="index">
          <div class="Dshop">
            <div class="Dtop">
              <div class="Dpercent">{{ item.percent }}</div>
              <div class="Dbank">{{ item.bank }}</div>
            </div>
            <div class="Dbottom">
              <div class="Dperformance">{{ item.performance }}</div>
              <div class="Dmoney">{{ item.money }}</div>
            </div>
            <span class="Dnext">{{ item.next }}</span>
          </div>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="Dslideshow">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img
              src="../assets/img/轮播图1.jpg"
              alt=""
              width="350px"
              height="150px"
          /></van-swipe-item>
          <van-swipe-item
            ><img
              src="../assets/img/轮播图2.jpg"
              alt=""
              width="350px"
              height="150px"
          /></van-swipe-item>
        </van-swipe>
      </div>
      <!-- 优选理财 -->
      <div class="Doptimization">
        <h3>优选理财</h3>
        <div
          id="Doptimization1"
          v-for="(item, index) in optimization"
          :key="index"
        >
          <div class="Dshop">
            <div class="Dtop">
              <div class="Dpercent">{{ item.percent }}</div>
              <div class="Dbank">{{ item.bank }}</div>
            </div>
            <div class="Dbottom">
              <div class="Dperformance">{{ item.performance }}</div>
              <div class="Dmoney">{{ item.money }}</div>
            </div>
            <span class="Dnext">{{ item.next }}</span>
          </div>
        </div>
      </div>
      <!-- 理财资讯 -->
      <div class="DmoneyMatters">
        <div class="DmoneyMatters1">
          <a href=""><h3>基金资讯</h3></a>
          <a href=""> <img src="../assets/img/右箭头(1).png" alt="" /> </a>
        </div>
        <ul class="DmoneyMatters2">
          <li class="Din1">
            <p>华商基金彭欣杨：依靠成长穿 <br />越周期 关注科技、创新医...</p>
            <p>2023-05-05</p>
          </li>
          <li class="Din2">
            <img src="../assets/img/广告1.webp" alt="" />
          </li>
        </ul>
        <ul class="DmoneyMatters2">
          <li class="Din1">
            <p>快讯：分化持续沪指一度涨近 <br />1%大金融板块发力</p>
            <p>2023-05-04</p>
          </li>
          <li class="Din2">
            <img src="../assets/img/广告2.webp" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hot_sale: [
        {
          percent: "4.20-4.70%",
          bank: "农银同心灵珑ESG第13期致...",
          performance: "业绩比较基准",
          money: "1元起购 | 期限400天",
          next: "业绩基准不代表未来表现和实际收益，测算详见说明",
        },
        {
          percent: "2.60%",
          bank: "农银安心天天利同业存单及...",
          performance: "业绩比较基准",
          money: "1元起购 | 最低持有1天",
          next: "业绩基准不代表未来表现和实际收益，测算详见说明",
        },
        {
          percent: "4.20-4.70%",
          bank: "农银同心灵动优选配置7天...",
          performance: "业绩比较基准",
          money: "1元起购 | 最低持有7天",
          next: "业绩基准不代表未来表现和实际收益，测算详见说明",
        },
      ],
      optimization: [
        {
          percent: "4.20-4.70%",
          bank: "农银同心灵珑ESG第13期致...",
          performance: "业绩比较基准",
          money: "1元起购 | 期限400天",
          next: "业绩基准不代表未来表现和实际收益，测算详见说明",
        },
        {
          percent: "2.60%",
          bank: "农银安心天天利同业存单及...",
          performance: "业绩比较基准",
          money: "1元起购 | 最低持有1天",
          next: "业绩基准不代表未来表现和实际收益，测算详见说明",
        },
        {
          percent: "4.20-4.70%",
          bank: "农银同心灵动优选配置7天...",
          performance: "业绩比较基准",
          money: "1元起购 | 最低持有7天",
          next: "业绩基准不代表未来表现和实际收益，测算详见说明",
        },
      ],
      mone: "******",
      eyeimg: require("../assets/img/闭眼睛.png"),
      // eyeimg1: require("../assets/img/睁眼睛.png"),
      a:0
    };
  },
  methods: {
    eyes() {
      if (this.a == 0) {
        this.mone = "0.00";
        this.eyeimg = require("../assets/img/睁眼睛.png");
        this.a = 1;
      } else if (this.a == 1) {
        this.mone = "******";
        this.eyeimg =require("../assets/img/闭眼睛.png");
        this.a = 0;
      }
    },
  },
};
</script>

<style scoped src="../assets/css/products(2).css">
</style>